<template>
	<view class="container">
		<view >
			<!-- 小程序 -->
			<view v-if="!token">
				<view class="getUserInfo">
					<text class="gtext">您还未允许微信登录授权</text>
					<text class="gtext" style="margin-bottom: 80rpx;">请点击下方按钮允许微信授权登录</text>
					<view class="btnbox">
						<navigator hover-class="none" class="bavbtn" target="miniProgram" open-type="exit">取消授权</navigator>
						<button type="warn" size="mini" class="minbtn" plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo">登录授权</button>
						<view style="height:20rpx"></view>
						<!-- <button size="mini" class="minbtn" @click="back" plain="true">取消授权</button> -->
					</view>
					
					<view class="getAgree">
						<radio-group @change="radioChange">
							<label class="radio">
								<radio style="transform: scale(0.7);" :value="val" :checked="checked" />
								<text @click.stop="protocal(1)">同意《用户协议》</text>
							</label>
						</radio-group>
					</view>
					
				</view>
			</view>
			
			<uni-popup ref="popup" type="center" :maskClick="false">
				<view class="bundcont">
					<view class="bindtitle">绑定手机号</view>
					<view class="bindinput">
						<input class="input" type="number" placeholder="请输入手机号" v-model="phone" maxlength="11" />
					</view>
					<view class="list_code">
						<view class="reg_fl">
							<input type="number" placeholder="请输入验证码" class="input_code" placeholder-class="place"  v-model="code" />
						</view>
						<view class="reg_fr">
							<button class="phone_code " @tap="getCode" :disabled="disabled">{{timeText}}</button>
						</view>
					</view>
					<!-- <view class="bindinput">
						<input class="input" type="text" placeholder="请输入邀请码(非必填)" v-model="invitationCode" />
					</view>
					 -->
					<view class="popbot" @click="bindphone">确认</view>
				</view>
			</uni-popup>
			
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../components/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				authorize: false,
				iscodeshow: false, //弹框是否显示
				openid: '',
				token: '',
				checked:false,
				val:true,
				phone:'',
				timeText:'获取验证码',
				countdown:60,
				code:'',
				invitationCode:'' // 邀请码
			};
		},
		onShow() {
			// this.$refs.popup.open()
			// // 先校验用户是否授权，如果没有授权，显示授权按钮
		},
		onHide() {},
		onUnload() {

		},
		methods: {
			getUserInfo(data) { //小程序授权--点击登录那一刻弹出填写二维码--必须填写
				let that = this
				console.log(data)
				console.log('345')
				if (that.checked == false) {
					that.tui.toast('请同意用户协议');
					return
				}
				
				let ReferralCode = uni.getStorageSync('ReferralCode');
				
				if (data.detail && data.detail.errMsg == "getUserInfo:fail auth deny") { //授权失败
					uni.showToast({
						title: "取消授权",
						icon: "none",
						duration: 2000
					});
					return;
				}
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						// 此处可以排除h5
						if (res.provider) {
							uni.login({ //先登录00
								provider: res.provider[0], //传入获取登录服务提供商
								success: function(loginRes) {
									// console.log(loginRes,"loginRes----")
									// return
									that.api.weiXinRegister({
										code:loginRes.code,
										ReferralCode: ''
									}).then(res => {
										// console.log(res,"------获取opendid")
										let openId = res.data.openId;
										that.api.userLogin({
											openId:openId
										}).then(res => {
											console.log(res,"-------登录")
											let isHavePhone = res.data.isHavePhone;
											that.cacheHelper.setToken(res.data.token);
											if (isHavePhone == 1) {
												that.cacheHelper.updateUserInfo();
												setTimeout(function () {
													uni.$emit('login', {msg: '用户登录'})
												},500)
												setTimeout(function () {
													uni.navigateBack({
														delta: 1
													});
												},1000)
											} else if (isHavePhone == 0) {
												// console.log(isHavePhone,'----')
												that.$refs.popup.open()
											}
											
										})
									})
									
								},
								fail() {
									console.log('调用登录接口失败')
									// reject('调用登录接口失败')
									reject('调用微信授权失败')
								}
							});
						}

					},
					fail() {
						reject('获取环境服务商失败')
					}
				})

			},
			toLogin() { //app
				this.$yrouter.push({
					path: "/pages/user/Login/index",
					query: {}
				});
			},
			// 
			radioChange: function (e) {
				console.log(e)
				this.checked = e.detail.value;
			},
			// 获取验证码
			getCode: function () {
				var that = this;
				var mobile = that.phone;
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){ 
					uni.showToast({
						title: '手机号格式不正确',
						icon:'none',
						duration:2000
					});
					return false; 
				} 
				that.api.getVerifyCode({
					phone:mobile,
					type:'register'
				}).then(res => {
					console.log(res,"====")
					that.tui.toast(res.msg)
					that.setTime();
				})
				
			},
			// 倒计时
			setTime:function(){
				var that = this;
				var time = that.countdown;
				if(time == 0){
					that.timeText = "获取验证码";
					that.disabled = false;
					time = 60; 
					that.countdown = time;
					return
				}else{
					that.disabled = true
					var timea = time-1;
					//console.log(timea)
					that.countdown = timea
					that.timeText = '等待'+'('+timea+')秒';
				}
				setTimeout(function(){
					that.setTime()
				},1000)
			},
			// 协议
			protocal: function (type) {
				uni.navigateTo({
					url: '../login/potocol/potocol?type=' + type,
				});
			},
			
			// 绑定
			bindphone: function () {
				let that = this;
				if (!that.phone) {
					that.tui.toast('请输入手机号码');
					return
				} else if (!that.code) {
					that.tui.toast('请输入验证码');
					return
				}
				that.api.getBindPhone({
					nowPhone:that.phone,
					code:that.code
					// invitationCode:that.invitationCode
				}).then(res => {
					console.log(res,"----绑定")
					that.tui.toast(res.msg)
					that.$refs.popup.close();
					that.cacheHelper.updateUserInfo();
					setTimeout(function () {
						uni.$emit('login', {msg: '用户登录'})
					},500)
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
					},1000)
					
				})
				
				
			}
			
			
			
		},
		mounted() {

		}
	};
</script>

<style lang="less" scoped>
	//邀请码

	.getUserInfo {
		// width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 350rpx 0 0;

		// padding: 30px;
		>.gtext {
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(247, 40, 49, 1);
			padding: 10rpx 0 0;
		}

		>.btnbox {
			display: flex;
			align-items: center;
			flex-direction: row;

			>.minbtn {
				margin: 0 40rpx;
				font-size: 32rpx;
				// padding: 0 !important;
				padding: 0 1.34em;
				border: 1rpx solid rgba(247, 40, 49, 1);
			}
		}

		text {
			font-size: 32rpx;
			text-align: center;
		}
	}

	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}

	.tab-bar {
		font-size: 0;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.9);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		border-top: 1px solid rgba(248, 248, 248, 1);

		.tab-bar-item {
			flex: 1;
			height: 49px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&.active {
				text {
					color: #ee7559;
				}

				.tab-bar-pic {
					display: none;
					background: #f9f9f9;

					&.active {
						display: block;
					}
				}
			}

			.tab-bar-pic {
				display: block;
				background: #f9f9f9;

				&.active {
					display: none;
				}
			}
		}

		.tab-bar-pic {
			width: 25px;
			height: 25px;
			background: #f9f9f9;

			image {
				width: 25px;
				height: 25px;
			}
		}

		.tab-bar-pic-active {}

		text {
			font-size: 10px;
			color: rgb(160, 160, 160);
			line-height: 10px;
			margin-top: 5px;
		}
	}

	.tab-bar-bg {
		padding-top: 46px;
		width: 100%;
	}

	.view-item {
		display: none;
		width: 100%;
	}

	.view-item-active {
		display: block;
	}

	.getUserInfo2 {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 30px;
		margin: 80rpx 0 0;

		p {
			margin-bottom: 20px;
		}
	}

	._van-dialog {
		z-index: 99999999999;
	}

	.bavbtn {
		width: 215.76rpx;
		height: 74rpx;
		text-align: center;
		line-height: 74rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
		color: #999999;
	}
	.getAgree {
		width: 100%;
		box-sizing: border-box;
		margin-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 50rpx;
		
	}
	.bundcont {
		width: 600rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		
	}
	.bindtitle {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}
	.bindinput {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
		
	}
	.input {
		width: 100%;
		box-sizing: border-box;
		height: 60rpx;
		line-height: 60rpx;
		// background: #F5F5F5;
		// border-radius: 10rpx;
		padding-left: 10rpx;
	}
	.popbot {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		color: #FFFFFF;
		background: #E42221;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin-top: 60rpx;
	}
	
	.list_code {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #F5F5F5;
		padding: 20rpx 0;
		.reg_fr {
			width: 195rpx;
			box-sizing: border-box;
			margin: 0;
			.phone_code {
				width: 100%;
				font-size: 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #E42221;
				background: none;
				padding: 0;
			}
		}
		.reg_fl {
			width: calc(100% - 195rpx);
			box-sizing: border-box;
			padding-right: 5rpx;
			.input {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 36rpx;
			}
			.place {
				font-size: 30rpx;
				color: #999999;
			}
		}
	}
			
	
	
	
</style>
